<template>
  <van-cell>
    <van-image
      slot="icon"
      width="36"
      height="36"
      fit="cover"
      :src="content.aut_photo"
    />
    <div class="nr" slot="title">
        <div class="top">
            <div style="color:#4e6ef2">{{content.aut_name}}</div>
            <div @click="dianzshu">
                <van-icon :name="content.is_liking?'good-job':'good-job-o'" 
                :class="{colored:content.is_liking}"
                />
                <span>{{content.like_count}}</span>
            </div>
        </div>
        
        <div style="color:black">{{content.content}}</div>
        
        <div>
            <span>{{content.pubdate}}</span>
            <van-button
            size="mini"
            round
            class="time"

            @click="reply">{{content.reply_count}}回复</van-button>

        </div>
        

    </div>
    

  </van-cell>
</template>
<script>
import {pingldianz,quexiaodianz} from "../../../api/article"
// console.log(pingldianz)
export default {
  name:'commentlist',
  props: {
    content: {
      type: Object,
      required: true
    },
  },
  created() {
    // console.log(this.content)
  },
  methods:{
    //   评论点赞事件
      async dianzshu(){
        //   评论id
        const commentID = this.content.com_id.toString()
          if (this.content.is_liking){
            //   点赞了，取消点赞
            await quexiaodianz(commentID)
            this.content.like_count--

          }else{
            //   没有点赞，点赞
            await pingldianz(commentID)
            this.content.like_count++
          }
          this.content.is_liking = !this.content.is_liking

          
      },
      reply(){
        // 点击回复
        //this.content就是我们需要向上再向上传递的数据
        this.$emit('isreplyss',this.content)
        

      }
  }
};
</script>
<style lang="less" scoped>
.nr {
    // max-width: 
    margin-left: 10px;
}
.top {
    display: flex;
    justify-content: space-between;;
}
.time {
    margin-left:15px ;
}
.colored {
    color: orange;
}
</style>